<template>
  <div class="activity-phone-main">
    <ActivityPhonePreview>
      <div class="content">
        <div class="title">
          {{ props.shareType == 1 ? props.card.title : props.poster.title }}
        </div>
        <blockquote v-if="props.shareType == 1">
          <div class="content-box">
            <div class="store-box">
              <div class="title-box">
                <el-image class="logo" :src="props.card.company_logo" fit="cover" />
                <div class="name">
                  <div>门店名称</div>
                  {{ props.card.company_name }}
                </div>
              </div>
              <div class="qcode">
                <img src="@/assets/smartMarketing/qcode.png" alt="" />
              </div>
              <div class="guide">{{ props.card.guide }}</div>
            </div>
            <el-image class="ad-img" :class="{'ad-img-height': props.card.store_adv_url}" :src="props.card.store_adv_url" fit="cover" />
          </div>
        </blockquote>
        <blockquote v-else>
          <div class="fixed_img_top">
            <el-image class="posterImg" v-if="props.poster.poster_url" :src="props.poster.poster_url" fit="cover" />
          </div>
          <div class="fixed_img_bottom">
            <el-image v-if="props.poster.store_adv_url" class="ad-img-bottom" :src="props.poster.store_adv_url" fit="cover" />
          </div>
        </blockquote>
      </div>
    </ActivityPhonePreview>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import ActivityPhonePreview from '../index.vue'

const props = defineProps({
  shareType: {
    type: [String,Number],
    default: 1
  },
  card: {
    type: Object,
    default: () => {
      return {}
    }
  },
  poster: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const formData = reactive<any>({

})

</script>
<style lang="scss">
.activity-phone-main {
  margin-right: 80px;
  .title {
    background: #ffffff;
    border-radius: 1px;
    border-bottom: 1px solid #f5f5f5;
    position: relative;
    text-align: center;
    font-size: 16px;
    font-family: STHeitiSC-Medium, STHeitiSC;
    font-weight: 500;
    color: #000000;
    height: 42px;
    line-height: 44px;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    width: 100%;
    z-index: 1;
    .close {
      position: absolute;
      top: 15px;
      left: 10px;
    }
  }
  .content-box {
    box-sizing: border-box;
    padding: 0 16px 0;
    margin-top: 52px;
    .store-box {
      background: #ffffff;
      border-radius: 8px;
      padding: 20px 22px 22px;
      margin-bottom: 16px;
      .title-box {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 20px;
        .logo {
          width: 60px;
          height: 60px;
          border-radius: 8px;
          margin-right: 13px;
        }
        .name {
          font-size: 14px;
          font-family: STHeitiSC-Light, STHeitiSC;
          font-weight: 300;
          color: #969696;
          div {
            font-size: 17px;
            font-family: STHeitiSC-Medium, STHeitiSC;
            font-weight: 500;
            color: #33302d;
            padding-bottom: 12px;
          }
        }
      }
      .qcode {
        background: #f2f6fc;
        border-radius: 8px;
        border: 1px solid #eaeaea;
        padding: 22px;
        height: 253px;
        margin-bottom: 11px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .guide {
        font-size: 15px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #969696;
        line-height: 24px;
        text-align: center;
      }
    }
  }
  .fixed_img_top {
    width: 100%;
    height: 583px;
    .posterImg {
      width: 100%;
      height: 100%;
      margin-bottom: 16px;
    }
  }
  .fixed_img_bottom {
    width: 100%;
    height: 154px;
    padding-top: 15px;
    .ad-img-bottom {
      width: 100%;
      height: auto;
    }
  }
  .ad-img {
    width: 100%;
    height: 152px;
    border-radius: 10px;
  }
  .ad-img-height {
    height: auto;
  }
}
</style>
